import Vue from 'vue'

import 'normalize.css/normalize.css' // 重置页面元素的 margin、padding 等值

// 导入 Element 以及 CSS 文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// element 中解决多语言问题的插件
// import locale from 'element-ui/lib/locale/lang/en'

import '@/styles/index.scss' // 全局的 css 文件

// console.log(process.env.VUE_APP_NUM)

// 项目的根组件
import App from './App'
// 一般 store 文件夹作用：就是用来存放 Vuex(状态) 代码
import store from './store'
// 路由
import router from './router'

import '@/icons' // 导入图标文件
import '@/permission' // 这个文件是用来做权限认证的(权限管理、路由守卫)

/**
 * Mock 是模拟、伪造数据使用 Vue3
 */
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// 设置 element Ui 默认的语言是英语 en(英文) zh(中文)
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明 el-form el-table
Vue.use(ElementUI)

// 全局组件注册
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)
// Vue.use()是给Vue添加插件(具体功能在对象里install方法中书写)
import GlobalObj from '@/components/index.js'
Vue.use(GlobalObj)

Vue.config.productionTip = false

new Vue({
  // 指将跟组件以及页面组件打包，打包以后放置到 id 为 app 的 div 中进行展示
  el: '#app', // el 这个属性值一般是一个元素，含义：是指将打包的好的资源挂载(放置)到哪一个位置
  router,
  store,
  render: h => h(App)
})

// 学习代码的套路:
// 听->懂20%
// 读->懂40%
// 仿->懂60%
// 写->懂80%
// 讲->懂100% (你能给别人讲明白)

// 写代码->套路(成长之路)
// 1. 思路(跟代码无关, 你知道要做什么/要什么/页面效果如何) -> 退出登录要干什么?
// 2. 编码(把思路一个个转成代码实现) -> (多仿写代码多练习多敲)
// 3. 改错(遇到问题找到问题原因, 解决问题)->(多思考多尝试, 多总结.md)

// 看别人代码:找东西方式↓
// 目标1: 快速找到页面对应的vue文件 (找页面 -> 看路由地址 -> 路由配置)
// 确定一下(定点破坏加点东西看看变不变)
// 目标2: 快速找到某个标签
// 用内容/class类名, 在vscode放大镜(全局代码搜索)
// 目标3: 如果上面找不到(用数据名字在代码里找不到)
// 就是网络请求回来的数据(动态渲染数据), 换一个内容/类名去找标签

// 写任何需求的万能模板: (1-4步)
// 明确需求和UI设计图
// 1. html+css(先布局)
// 2. ajax请求数据/固定数据/绑定数据(铺设页面)
// 3. js代码(交互)(难)(思路来源于画面, 代码来源于熟练)(注意: 一小步一小步实现)
// 4. 调用后台接口和后台交互

// 组件的套路
// 明确UI设计图, 知道要什么样子的组件
// 1. (找组件)去组件库文档, 找到最相似的组件
// 2. (用组件)相关代码都复制到自己的vue文件内
// 3. (读组件)读标签作用关系, 还有属性作用(多看文档的基础例子和下面的属性解释)
// 4. (删组件)把多余的不要的删除掉
// 5. (改组件)添加需要补充的属性/内容

// 登录->流程
// 1. Login/index.vue->触发登录点击事件
// 2. 执行vuex里user/loginAction方法(await 等待登录流程走完再往下执行)
// 3. Actions方法里->api/user.js里login接口方法
// 4. 把登录页面账号密码又接着传入->request.js里(用axios请求)
// 5. (先走request那请求拦截器里), return走完以后才调用内部原生ajax请求->(拼接baseURL拼接前缀)-> 去请求去了
// 6. 响应回来以后, 走response响应拦截器, 一层层往回去
// 7. 登录的那块await才放行, 走路由跳转和路由守卫

// 经验->建议(不是必须)
// "网络请求"尽量写在"页面组件"里(父)
// 子组件->负责展示数据和简单交互, 数据处理传回给父组件

// 在一个函数内要使用另外一个函数内形参
// data里定义个变量中转一下

// 有的用ES6 有的用CommonJS规范
// src下代码和main.js入口产生直接/间接的引入关系, 都会被webpack打包翻译(import语法翻译掉)
// settings.js里用module.exports导出, 其他位置import导入settings.js
// https://segmentfault.com/a/1190000012386576
// webpack+babel, 会把ES6->ES5的代码(模块引入) (commonJS规范挂载到exports对象属性上)

// main.js -> webpack打包的"入口", 所有的代码都会"先执行"
// Vue.component() -> 这行代码才叫全局注册组件(组件标签全局挂在到Vue体系里)

// 新的技术:
// 1. 百度->找到用的包名/技术名
// 2. 尝试找下 有没有官网(使用说明书), 没有官网, 去github.com/npmjs.com 包介绍看看
// 3. 第二步就是为了看下这个包怎么用(配合百度的文章精度, 尝试)
// 4. 去一些以前的项目里/有这个功能的项目里看看别人是怎么用的?
// 5. 找同学/老师/组长/...动用一切可以团结的力量, 解决这个问题
// 6. 一定一定一定要拿个md/小笔记, 把关键的这段代码实现方案记录下来(也可以试着写博客分享)

// -S 代表 --save (默认不写也可以) 这个包名配置到package.json的生产环境中出现dependencies
// -S -D 代表--save-dev (需要写) 就是把这个包名配置到package.json的开发环境中出现在devDependencies
// 运行过程: 其实对于此项目来说, 没有区别, 你爱配置到哪里就到哪里, 没影响(包用不用取决于有没有被webpack一起打包解析)
// 例如: 你下载了1w个包(开发/生产), 最后你在main.js只用了1个, 项目打包的时候只有1个包

// 开发封装一个包的时候, 并且把此包(文件夹)发布到npm网站上, 就有区别了
// 别人下载你的包看不到开发环境的那些包名, 它只能看到生产环境的包名
// 例如: https://www.bilibili.com/video/BV15M4y1u78F

// 说明: 什么时候该加-S还是加-S -D, 看npmjs.com网站的介绍

// 浏览器介绍:
// 浏览器本身什么都没有, 只有一些本地存储的localStorage/sessionStorage/Cookie里值
// 浏览器想显示什么, 都得靠url地址去请求, 拿到内容html(标签), css(样式代码), js逻辑代码, 图片(图片地址)
// 运行效果然后展示给用户看

// 图片介绍
// 图片来自于url地址指向的位置
// 本地服务器: (webpack开发服务器, 把项目文件夹里的图片, 通过url地址, 返回给浏览器)
// 链接, 在写代码的时候, 插入给img标签的src的字符串值(图片的链接地址)
// 外链服务器: (需要链接互联网络, 通过外部网址, 拿到别人家服务器上的图片回来, 在我的浏览器和我的项目中展示)
// 公司自己的服务器: 可以少量存储, 大量的话需要买硬盘(比较贵, 不用了可能折价还得卖掉)
// 第三方图片云托管服务器-存图片空间(只负责保存图片文件, 返回一个图片url地址) -> (便宜, 不用了直接注销不用管硬件)
//               前端直传: 前端直接引用第三方云空间的服务上封装的sdk包, 直接把文件传递到第三方云托管空间里, 返回一个图片的url地址, ajax->把地址和其他信息一起发给自己的后台 (自己的服务器最终保存的只是一个图片url地址) -> 多
//               后端直传: 前端先把图片文件交给自己的后台, 由后台把图片文件再上传给第三方的云托管空间里, 返回一个图片的url地址 (自己的服务器保存)

// 云服务器 -> 一般有 专门的运维工程师管理 / 后台管理
// 完整的完全的 云服务器 (跟一台完整的电脑一样) -> 部署数据库+后端代码+前端代码+任何资源(图片) => ip/域名端口, 服务 (花钱的)
// 不完整 云对象存储 (服务商给你一个文件夹) -> 部署静态文件(图片/视频/音频)->返回一个url地址给你访问 (某些流量之内是免费的, 超出 免费流量, 需要花钱)

// 我们在腾讯云上的对象存储桶
// 可能开发者有很多个, 组长A, 队员B, 队员C
// 每个人都有一个API秘钥文件, 来表示自己的身份是否可以操作这个存储桶
// 注意: 此秘钥文件不能让开发者以外的人获取到, 否则黑客D, 就能拿着你的秘钥, 往你的存储当里堆满数据
// 以后在使用其他的第三方SDK (微信功能/百度地图/...) 每个网站你都要创建一个应用(类似存储桶), 可以把他们的SDK集成到自己的项目工程中, 需要API秘钥来表明你是合法合全的开发者
// API秘钥 == 开发者
